<template>
  <div class="userinfo">
    <div class="user">
      <div class="user_top">
        <img
          class="avatar"
          :src="
            userinfo.data.avatar_url
              ? userinfo.data.avatar_url
              : 'https://avatars.githubusercontent.com/u/55451221?v=4&s=120'
          "
          alt=""
        />
        <div class="username">{{ userinfo.data.loginname }}</div>
      </div>
      <div class="user-bottom">
        <p>活跃：{{ userinfo.data.create_at }}</p>
        <p>发布：{{ recent_topics.data.length }}篇</p>
        <p>积分：{{ userinfo.data.score }}</p>
      </div>
    </div>
    <hr />
    <div class="about-article">
      <h4>相关文章</h4>
      <div
        class="art-inner"
        v-for="(item, index) in recent_topics.data"
        :key="index"
        @click="goDetails(item)"
      >
        <div class="art-title" :title="item.title">{{ item.title }}</div>
        <div class="art-timer">{{ item.create_at }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
//模块复用 跳转详情
import { handleDataList } from '@/modules/cnode/handleDataList'
import Model from '@/http/api'
import { filterTimer } from '@/utils/util'
import { useRoute } from 'vue-router'
const api = new Model()
export default {
  setup(props) {
    // const router = useRouter()
    //路由参数
    const route = useRoute()
    const username = route.params
    let options = reactive({
      username: username.user || sessionStorage.getItem('UserInfo'),
    })
    const userinfo = reactive({
      data: {},
    })
    const recent_topics = reactive({
      data: [],
    })
    //跳转详情
    const { goDetails } = handleDataList()
    //获取个人详情
    api.getUserDetail(options).then(({ data }) => {
      if (data.success) {
        console.log(data);
        userinfo.data = data.data
        userinfo.data.create_at = filterTimer(data.data.create_at)
        recent_topics.data = data.data.recent_topics
        recent_topics.data.forEach((val) => {
          val.create_at = filterTimer(val.last_reply_at)
        })
      }
    })
    return {
      userinfo,
      recent_topics,
      goDetails,
    }
  },
}
</script>
<style lang="scss" scoped>
.userinfo {
  padding: 20px;
  box-sizing: border-box;
  color: #707070;
  .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .user_top {
    display: flex;
    flex-direction: column;
    align-items: center;
    .avatar {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      margin: 20px;
    }
  }
  .user-bottom {
    margin: 20px 0;
    width: 300px;
    display: flex;
    justify-content: space-between;
  }
  .about-article {
    .art-inner {
      padding: 10px 5px;
      box-sizing: border-box;
      display: flex;
      border-bottom: 1px solid #808080;
      justify-content: space-between;
    }
  }
}
</style>